<template >
	<div class="contain-logon">
		<div class="logon-form">
			<div class="login-header">
				绿色包装经济化实验测试<br>
				指导平台
			</div>
			<div class="login-body">
				<el-form ref="loginForm" :model="form"   label-width="0px" :rules="rules">
					<el-form-item prop="phone">
						<el-input placeholder="请输入学号" v-model="form.phone">
							<i slot="prefix" class="el-input__icon el-icon-mobile-phone" ></i>
						</el-input>
					</el-form-item>
					<el-form-item prop="password">
						<el-input placeholder="请输入密码" style="margin-top: 20px" v-model="form.password">
							<i slot="prefix" class="el-input__icon el-icon-lock" ></i>
						</el-input>
					</el-form-item>
					<el-form-item prop="truePassword">
						<el-input placeholder="再次确认密码" style="margin-top: 20px" v-model="form.truePassword">
							<i slot="prefix" class="el-input__icon el-icon-lock" ></i>
						</el-input>
					</el-form-item>
				</el-form>
			</div>
			<div class="login-btn">
				<div class="btn" @click="userLogon('loginForm')">注 册</div>
			</div>
			<div class="login-btn" style="margin-top: 20px">
				<el-button type="text" style="width: 100%" @click="getInLogin">返回登录</el-button>
			</div>
		</div>
	</div>
</template >

<script >
    import  { studentLogon } from "../api/login";
    export default {
        name: "logon",
        data(){
            // 验证确认密码
            let checkRePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                }else if (value !== this.form.password) {
                    callback(new Error('两次输入密码不一致'));
                } else {
                    callback();
                }
            };
            return{
                form:{
                    password: "",
                    phone: "",
                    truePassword: ""
                },
                rules: {
                    phone: [{ required: true, message: '请输入学号或手机号', trigger: 'blur' }],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 6, max: 18, message: "长度在 6 到 18个字符", trigger: "blur" },
                    ],
                    truePassword:[{ required: true, trigger: 'blur', validator: checkRePass }],
                },
            }
        },
        methods:{
            //注册
            userLogon(loginForm){
                this.$refs[loginForm].validate((valid) => {
                    if (valid) {
                        studentLogon(this.form).then( res => {
                            if (res.data.code === 200){
                                this.$message.success(res.data.message)
                                this.form = {}
                                this.$router.replace('/')
                            }

                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            getInLogin(){
                this.$router.replace('/')
            }
        }
    }
</script >

<style scoped lang="less">
	.contain-logon{
		position: relative;
		width: 100vw;
		height: 100vh;
		background: url("../assets/images/resut.png") no-repeat center;
		background-size: 100%;
		.logon-form{
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			width: 20vw;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: space-between;
			.login-header{
				width: 100%;
				text-align: center;
				font-size: 28px;
				letter-spacing: 1px;
				color: #4e667c;
				font-weight: 600;
				line-height: 50px;
			}
			.login-body{
				width: 100%;
				margin: 10% 0;
				/deep/.el-form-item__content{
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
				/deep/.el-form-item{
					margin-bottom: 0;
				}
				/deep/.el-input__inner{
					border: none;
					border-radius: 20px;
				}
			}
			.login-btn{
				width: 100%;
				margin: 0 auto;
				.btn{
					width: 100%;
					height: 40px;
					border-radius: 20px;
					text-align: center;
					line-height: 40px;
					color: #fff;
					background-image: linear-gradient(to top, #2eddda 0%, #2fa0e7 100%);
					&:hover{
						cursor: pointer;
					}
				}
			}
		}
	}
</style >
